<template>
	<view id="proxy-index">
		<v-title>{{ $lang('index.title') }}</v-title>
		<header-back :headerTitle="$lang('index.title') "></header-back>
		<view v-if=" token && memberInfo.member_level_name != '铂钻会员'"  class="member-level" :class="{ 'no-default-level': defaultInfo.menuStyle != 'palace' && defaultInfo.topStyle != 'default' }"
		 @click="jumpLevel()">
			<view class="member">
				<image :src="$util.img('upload/uniapp/member/index/member.png')" mode="aspectFit"></image>
			</view>
			<view class="member-level-box" >
				<view class="img-wrap">
					<image class="img-v" :src="$util.img('upload/uniapp/member/index/v.png')" mode="aspectFit"></image>
					<text class="font-size-tag" v-if="token">{{ memberInfo.member_level_name }}</text>
					<text class="font-size-goods-tag" v-else>{{ $lang('index.loginToViewBenefits') }}</text>
				</view>
				<text class="memeber-tit">
					<text class="member-title">{{ $lang('index.moreRight') }}</text>
					<text class="iconfont iconright font-size-goods-tag"></text>
				</text>
			</view>
		</view>
		
		<view class="content-proxy">
			<view class="header">
				<image src="/static/icon/proxy_font.png" class="t-img" mode=""></image>
				<view class="h5">{{ $lang('index.tip1') }}</view>
			</view>
			
			<view class="content">
				<view class="proxy-row">
					<view class="row-box">
						<view class="row-item" v-for="(obj,i) in msgArr" :key="i">
							<image :src="obj.img" class="row-icon" mode=""></image>
							<view class="h3">{{obj.title}}</view>
							<view class="h6">{{obj.msg}}</view>
						</view>
					</view>
					<view class="row-imgs">
						<image src="/static/icon/icon_lianjie.png" class="row-icon" mode=""></image>
						<image src="/static/icon/icon_lianjie.png" class="row-icon" mode=""></image>
					</view>
				</view>
				<view class="proxy-row">
					<view class="row-msg">
						<view class="row-wrap" v-for="(item,k) in msgAry" :key="k">
							<view class="h3">{{item.title}}</view>
							<view class="h6">{{item.msg}}</view>
						</view>
					</view>
				</view>
			</view>
			
			<view class="content-footer">
				<view :class="['btn',(memberInfo.aagent_status == 0 && memberInfo.is_aagent == 1) ?'dis-btn':'']" @click="toRouter('/pages/member/proxy/apply')">{{ $lang('index.becomeAnAgent') }}</view>
			</view>
			
		</view>
		
		<ns-login ref="login"></ns-login>
		<loading-cover v-if="token" ref="loadingCover"></loading-cover>
		<!-- 底部tabBar -->
		<!-- <diy-bottom-nav type="shop" :tabIndex="2" ></diy-bottom-nav> -->
	</view>
</template>

<script>
	// import diyBottomNav from '@/components/diy-bottom-nav/diy-bottom-nav.vue';
	import headerBack from '@/components/headerBack.vue'
export default {
	data() {
		return {
			msgArr: [],
			msgAry: [],
			defaultInfo: {
				topStyle: 'default',
				bgColor: '#ff454f',
				textColor: '#fff',
				bgImg: '',
				menuList: [],
				insertGap: '0',
				menuStyle: 'palace',
				level: 1
			},
			memberInfo: {},
			token: '',
		};
	},
  onLoad(){

    this.msgArr= [
      {
        img: '/static/icon/icon_proxy_03.png',
        title: this.$lang('index.tip2'),
        msg: this.$lang('index.tip3'),
      },
      {
        img: '/static/icon/icon_proxy_02.png',
        title: this.$lang('index.tip4'),
        msg: this.$lang('index.tip5'),
      },
      {
        img: '/static/icon/icon_proxy_01.png',
        title: this.$lang('index.tip6'),
        msg: this.$lang('index.tip7'),
      }
    ]
  this.msgAry = [
      {
        title: this.$lang('index.tip8'),
        msg: this.$lang('index.tip9'),
      },
      {
        title: this.$lang('index.tip10'),
        msg: this.$lang('index.tip11'),
      },
      {
        title: this.$lang('index.tip12'),
        msg: this.$lang('index.tip13'),
      }
    ]
  },
	computed: {
		i18n () {
			return this.$t('Mine')  
		},
	},
	created() {
		this.token = uni.getStorageSync('token');
		if(this.token){
			this.getMemberInfo();
		}
	},
	components: {
		headerBack
	},
	onShow() {

	},
	methods: {
		// 跳转
		toRouter(url){
			if (!uni.getStorageSync('token')) {
				return this.$refs.login.open('/pages/index/index/index');
			}
			// return this.$util.showToast({title: '功能开发中'})
			if(this.memberInfo.aagent_status == 0 && this.memberInfo.is_aagent == 1) return this.$util.showToast({title: '您已提交申请，正在审核中'});
			uni.navigateTo({
				url: url,
			})
		},
		jumpLevel() {
			if (uni.getStorageSync('token')) {
				this.$util.redirectTo('/pages/member/level');
			} else {
				this.$refs.login.open('/pages/index/index/index');
			}
		},
		// 获取会员基础信息
		async getMemberInfo() {
			let res = await this.$api.sendRequest({
				url: '/api/member/info',
				async: false
			});
			if (res.code >= 0 && res.data) {
				this.memberInfo = res.data;
				if(this.memberInfo.aagent_status == 1) {
					uni.redirectTo({
						url: '/pages/member/proxy/data'
					})
				}else {
					if (this.$refs.loadingCover) this.$refs.loadingCover.hide();
				}
			}
		},
	}
};
</script>

<style>
	page {
		/* font-family: 'PingFangSC-Regular, PingFang SC';
		height: 100%;
		background-image: url(../../../static/icon/proxy_bg_img.png);
		background-repeat:no-repeat center;
		background-size:100% 100%;
		background-attachment:fixed; */
		/* background-color: rgba($color: #fff, $alpha: 0.12); */
		/* -moz-background-size:100% 100%; */
		background: #fff;
	}
</style>

<style scoped lang="scss">
	#proxy-index {
		width: 100%;
		padding: 52rpx 32rpx;
		box-sizing: border-box;
	}
	
	.member-level {
		width: 100%;
		padding: 0 0 20rpx;
		box-sizing: border-box;
		position: relative;
		background-color: #fff;
		&.no-default-level {
			padding-bottom: 20rpx;
			.member {
				bottom: 20rpx;
			}
		}
		.member {
			position: absolute;
			width: 69rpx;
			height: 75rpx;
			right: 30rpx;
			bottom: 20rpx;
			image {
				width: 69rpx;
				height: 75rpx;
			}
		}
		.member-level-box {
			// width: 702rpx;
			height: 88rpx;
			padding: 0 $padding;
			border-radius: 6px;
			background: linear-gradient(to right, darken(#ffb644, 43%), #1d1d1d);
			box-sizing: border-box;
			display: flex;
			justify-content: space-between;
			align-items: center;
			color: #e5ce75;
	
			.img-wrap {
				display: flex;
				color: #e5ce75;
				font-size: $font-size-tag;
				.img-v {
					height: 22rpx;
					width: 22rpx;
					margin-right: 10rpx;
				}
			}
	
			.memeber-tit {
				margin-right: 16rpx;
			}
			.member-title {
				margin-right: 10rpx;
				font-size: $font-size-activity-tag;
			}
			text {
				font-size: $font-size-tag;
				line-height: 1;
				display: flex;
				align-items: center;
				text {
					display: inline-block;
				}
			}
		}
	}
	
	
	.content-proxy {
		width: 100%;
		padding: 52rpx 24rpx 0rpx;
		box-sizing: border-box;
		font-family: 'PingFangSC-Regular, PingFang SC';
		height: 100%;
		background-image: url(../../../static/icon/proxy_bg_img.png);
		background-repeat:no-repeat center;
		background-size:100% 100%;
		background-attachment:fixed;
		-moz-background-size:100% 100%;
		border-radius: 8rpx;
		.header {
			margin-bottom: 32rpx;
			.t-img {
				width: 632rpx;
				height: 48rpx;
				display: block;
				margin: 0px auto 32rpx;
			}
			.h5 {
				font-size: 24rpx;
				color: #fff;
				line-height: 34rpx;
			}
		}
	}
	
	.proxy-row {
		margin-bottom: 10rpx;
		position: relative;
		// padding-bottom: 100rpx;
		.row-box {
			width: 100%;
			padding: 38rpx 30rpx 36rpx;
			box-sizing: border-box;
			background: #FFF8F8;
			border-radius: 20rpx;
			display: grid;
			grid-template-columns: 1fr 1fr 1fr;
			grid-column-gap: 30rpx;
			.row-item {
				text-align: center;
				.row-icon {
					width: 76rpx;
					height: 76rpx;
					margin-bottom: 14rpx;
				}
				.h3 {
					font-size: 24rpx;
					font-weight: 500;
					color: #282828;
					line-height: 34rpx;
					margin-bottom: 16rpx;
				}
				.h6 {
					font-size: 20rpx;
					color: #92969E;
					line-height: 28rpx;
					text-align: left;
				}
			}
			
			
			
		}
		
		.row-imgs {
			width: 100%;
			height: 48rpx;
			display: flex;
			align-items: center;
			justify-content: space-between;
			padding: 0px 70rpx;
			box-sizing: border-box;
			position: absolute;
			bottom: -30rpx;
			left: 0px;
			z-index: 2;
			.row-icon {
				width: 48rpx;
				height: 48rpx;
			}
		}
		
		.row-msg {
			width: 100%;
			padding: 44rpx 30rpx 46rpx;
			box-sizing: border-box;
			background: #FFF8F8;
			border-radius: 20rpx;
			.row-wrap {
				margin-bottom: 36rpx;
				.h3 {
					font-size: 26rpx;
					font-weight: 600;
					color: #282828;
					line-height: 36rpx;
					margin-bottom: 8rpx;
				}
				.h6 {
					font-size: 24rpx;
					color: #92969E;
					line-height: 34rpx;
				}
			}
			.row-wrap:last-child {
				margin-bottom: 0px;
			}
		}
		
	}
	
	.content-footer {
		width: 100%;
		// position: fixed;
		// bottom: 50rpx;
		// left: 0px;
		padding: 28rpx 0rpx;
		box-sizing: border-box;
		.btn {
			width: 100%;
			height: 88rpx;
			display: flex;
			align-items: center;
			justify-content: center;
			background: #fff;
			border-radius: 44rpx;
			font-size: 32rpx;
			color: #31bb6d;
			font-weight: bold;
		}
		
		.dis-btn {
			background: #CCD0D8;
			color: #fff;
		}
	}
	
</style>
